<template>
    <div class="ct-bodySet">
        <el-container>
            <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>字段管理</el-breadcrumb-item>
                    <el-breadcrumb-item><span class="main-Clr-ft">项目管理</span></el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>

            <div class="pl20 pr20">
                <el-card class="mb20 cardWidth">
                    <div slot="header">
                        <span>条件查询</span>
                    </div>
                    <el-form :inline="true"  :model="formData" ref="formData" class="noMarginBottom">
                        <el-form-item class="mb1" prop="projectName" label="项目名称">
                            <el-input placeholder="请输入项目名称" size="small" v-model.trim="formData.projectName"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" class="mb1" prop="stateValue">
                            <el-select v-model="formData.stateValue"  size="small">
                                <el-option
                                        v-for="item in optionState"
                                        :label="item.value"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="mb1 fltRt">
                            <el-button @click="resetMessage('formData')" size="small" class="bkmgColor">重置</el-button>
                        </el-form-item>
                        <el-form-item class="mb1 fltRt">
                            <el-button type="primary" @click="searchMessage()" size="small">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card class="cardWidth">
                    <div slot="header">
                        <span>项目列表</span>
                    </div>
                    <span class="fltRt">
                        <el-button type="text" icon="iconfont icon-tianjia" @click="addproject('dialogFormData')" size="small">添加</el-button>
                    </span>
<!--                    <span class="fltLt">-->
<!--                        <el-button type="text" icon="iconfont icon-paixu" @click="projectOrder()" size="small">序</el-button>-->
<!--                    </span>-->

                    <el-table
                            ref="multipleTable"
                            border
                            stripe
                            :header-cell-style="getRowClass"
                            tooltip-effect="dark"
                            height="335"
                            :data="getPageData()"
                            @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="48"></el-table-column>
                        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="summary" label="项目概述" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="enable" label="项目状态" show-overflow-tooltip width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.enable=='1'" >启用</span>
                                <span v-else-if="scope.row.enable=='0'" v-bind:style="{color:'red'}">禁用</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="updateDate" label="操作时间" show-overflow-tooltip width="200"></el-table-column>
                        <el-table-column prop="operation" label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button title="查看" type="text" size="small" @click="dialogForprojectInfoSee(scope.row)" icon="iconfont icon-chakan"></el-button>
                                <el-button title="编辑" type="text" size="small" @click="dialogForprojectInfoEdit(scope.row)" icon="iconfont icon-bianji"></el-button>
                                <el-button v-if="scope.row.enable=='0'" title="启用" type="text" size="small" @click="editEnable(scope.row)" icon="iconfont icon-jinyong"></el-button>
                                <el-button v-else-if="scope.row.enable=='1'" title="禁用" type="text" size="small" @click="editEnable(scope.row)" icon="iconfont icon-jinyong"></el-button>
                                <el-button title="删除" class="deleteButtonColor" type="text" size="small" @click="deleteUserMessage(scope.row)" icon="iconfont icon-shanchu"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="项目信息" :visible.sync="dialogForprojectFlag">
                        <el-form  ref="dialogFormData"
                                  :model="dialogFormData"
                                 :rules="formRules">
                            <el-form-item label="项目名称:" prop="diaProjectName" label-width="19%">
                                <span v-if="editPara==='see'">{{dialogFormData.diaProjectName}}</span>
                                <el-input v-else v-model.trim="dialogFormData.diaProjectName" placeholder="请输入项目名称" size="small" class="width77" maxlength="100"></el-input>
                            </el-form-item>
                            <el-form-item label="项目描述:" prop="diaSummary" label-width="19%">
                                <span v-if="editPara==='see'">{{dialogFormData.diaSummary}}</span>
                                <el-input type ="textarea" v-else v-model.trim="dialogFormData.diaSummary" placeholder="请输入项目描述" size="small" class="width77" maxlength="200"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogForprojectFlag = false">取 消</el-button>
                            <el-button type="primary" @click="submitproject('dialogFormData')">确 定</el-button>
                        </div>
                    </el-dialog>
                    <div class="mt15 textAlignRight">
                        <el-pagination
                                layout="total,sizes,prev, pager, next,jumper"
                                :total="tableData.length"
                                @size-change="handleSizeChange"
                                :current-page.sync="currentPage"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="pagesize">
                        </el-pagination>
                    </div>
                </el-card>
            </div>
            <div class="bottomLayoutBus"></div>

        </el-container>

    </div>
</template>

<script>
    import urlConfig from '../../../config/url.json';
    import Vue from 'vue';
    import { Message } from 'element-ui';
    Vue.component(Message.name, Message);

    let projectUrl=urlConfig.projectManage;
    let projectInfoByIdUrl = urlConfig.projectInfoById;
    let changeProjectStatusUrl = urlConfig.changeProjectStatus;

    export default {
        data() {
            return {
                value2:'',
                tableData: [],
                editPara:'',
                requestUrl:'',
                currentPage: 1,
                pagesize: 5,
                dialogForprojectFlag:false,
                optionState:[
                    {
                        code:-1,
                        value:'全部',
                    },{ code:1,
                        value:'启用',
                    },{
                        code:0,
                        value:'禁用',
                    }],
                dialogFormData:{
                    id:'',
                    diaProjectName:'',
                    diaSummary:''
                },
                formData: {
                    projectName:'',
                    stateValue:{code:-1,value:'全部'}
                },
                formRules: {
                    diaProjectName: [
                        { required: true,message:'必填信息' },
                        { max: 100, message: '最长100个字符', trigger: 'blur' }
                    ],
                    diaSummary: [
                        { required: false,message:'必填信息' },
                        { max: 200, message: '最长200个字符', trigger: 'blur' }
                    ]}
            }
        },
        methods: {
            //排序-跳转新的页面
            projectOrder(){
                this.$router.push({
                    path:'/mainPage/projectOrder',
                    query: {
                        groupId: this.groupId,
                        groupName: this.groupName,
                    }
                })
            },
            //重置
            resetMessage (formName) {
                this.$refs[formName].resetFields();
                this.selectProjectData('','-1');
            },

            //分页后的显示数据
            getPageData(){
                let that=this;
                return that.tableData.slice((that.currentPage-1)*that.pagesize,that.currentPage*that.pagesize);
            },
            searchMessage(){
                let that=this;
                var stateValue = that.formData.stateValue.code;
                var projectName = that.formData.projectName;
                that.selectProjectData(projectName,stateValue);
            },
            //向后台查询项目
            selectProjectData(projectName,stateValue){

                let that=this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                this.$http({
                    method: 'get',
                    url: projectUrl,
                    baseURL:'/api',
                    params:{
                        'projectName':projectName,
                        'stateValue':stateValue,

                    }
                }).then(function(response){
                    if(response.data.code==200){
                        that.tableData=response.data.data.dcProjectList;
                    }
                    else{
                        Message.error('获取数据失败');
                    }
                    loading.close();
                }).catch(function(err){
                    console.log(err);
                    Message.error('获取数据失败');
                    loading.close();
                });

            },

            dialogForprojectInfo(row){
                let that=this;
                that.dialogForprojectFlag=true;
            },
            //设置表头颜色
            getRowClass({ rowIndex }) {
                if (rowIndex == 0) {
                    return 'background:#F5F7FA'
                } else {
                    return ''
                }
            },
            //添加按钮
            addproject(formName){
                debugger;
                let that = this;
                if(that.$refs[formName]){
                    that.$nextTick(()=>{
                        that.$refs[formName].resetFields();
                        that.$refs[formName].clearValidate();

                    });
                }
                that.dialogForprojectFlag = true;
                that.editPara ='add';

            },

            //查看按钮
            dialogForprojectInfoSee (row){
                let that = this;
                that.dialogFormData.id = row.id;
                that.editPara ='see';
                that.$nextTick(()=>{
                    that.$refs['dialogFormData'].resetFields();
                    that.$refs['dialogFormData'].clearValidate();
                });
                that.projectInfoById();

            },
            //编辑按钮
            dialogForprojectInfoEdit(row){
                let that = this;
                that.dialogFormData.id = row.id;
                that.editPara ='edit';
                that.$nextTick(()=>{
                    that.$refs['dialogFormData'].clearValidate();
                    that.$refs['dialogFormData'].resetFields();

                });
                that.projectInfoById();

            },
            projectInfoById(){
                let that = this;
                debugger;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                that.$http({
                    method: 'get',
                    url: projectInfoByIdUrl,
                    baseURL: '/api',
                    params: {
                        'id': that.dialogFormData.id
                    }
                }).then(function (response) {
                    debugger;
                    if (response.data.code==200) {
                        var projectInfo = response.data.data.dcProject;
                        that.dialogFormData.diaProjectName = projectInfo.projectName;
                        that.dialogFormData.diaSummary = projectInfo.summary;
                        that.dialogForprojectFlag = true;

                    } else {
                        Message.success('查看项目信息失败');
                    }
                    loading.close();
                }).catch(function (err) {
                    Message.error('查看项目信息失败');
                    console.log(err);
                    loading.close();
                })},

            submitproject(formName){
                let that = this;
                debugger;
                if(that.editPara=='see'){
                    that.dialogForprojectFlag=false;
                    return;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                        });
                        if(that.editPara=='edit'){
                            var method = 'put';//修改提交
                        }else{
                            method = 'post';//添加提交
                        }
                        that.$http({
                            method: method,
                            url: projectUrl,
                            baseURL: '/api',
                            data: {
                                'id': that.dialogFormData.id,
                                'projectName': that.dialogFormData.diaProjectName,
                                'summary':that.dialogFormData.diaSummary
                            }
                        }).then(function (response) {
                            if (response.data.code==200) {
                                that.dialogForprojectFlag=false;
                                Message.success('提交项目信息成功');
                                that.editPara = 'see';
                                that.searchMessage();
                            } else {
                                Message.success('提交项目信息失败');
                            }
                            loading.close();
                            that.editPara = 'see';
                        }).catch(function (err) {
                            Message.error('提交项目信息失败');
                            console.log(err);
                            loading.close();
                        });

                    } else {
                        console.log('提交信息校验不通过，请修改输入信息!!');
                        return false;
                    }
                });},

            //启用/禁用
            editEnable(row){
                let that=this;
                if(row.enable==1){
                    var content = '确定禁用    <span class="main-Clr-ft">'+row.projectName   +'</span>    项目吗,禁用后项目将无任何操作权限？'
                }
                else
                {
                    var content = '确定启用    <span class="main-Clr-ft">'+row.projectName   +'</span>    项目吗'

                }
                that.$confirm(content,'温馨提示',{
                    dangerouslyUseHTMLString: true,
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                    });
                    debugger;
                    that.$http({
                        method: 'put',
                        url: changeProjectStatusUrl,
                        baseURL:'/api',
                        data:{
                            'id':row.id,
                            'stateValue':row.enable,
                        }
                    }).then(function(response){
                        if(response.data.code==200) {
                            Message.success('操作成功');
                            that.selectProjectData('','-1');
                        }else{
                            Message.error('操作失败');
                        }
                        loading.close();
                    }).catch(function(err){
                        Message.error('操作失败');
                        console.log(err);
                        that.selectProjectData('','-1');
                        loading.close();
                    });
                }).catch(() => {
                    Message.info('已取消操作');
                });
            },

            //删除
            deleteUserMessage (row) {
                let that=this;
                if(row.enable=='0'){
                    this.$confirm('确定要删除    <span class="main-Clr-ft">'+ row.projectName   +'</span>    项目吗？','温馨提示',{
                        dangerouslyUseHTMLString: true,
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                        });
                        this.$http({
                            method: 'delete',
                            url: projectUrl,
                            baseURL:'/api',
                            data:{
                                id:row.id
                            }
                        }).then(function(response){
                            if(response.data.code>199 && response.data.code<400) {
                                Message.success('删除'+ row.projectName +'项目成功');
                                that.selectProjectData('','-1');
                            }else{
                                Message.error('删除'+ row.projectName +'项目失败');
                            }
                            loading.close();
                        }).catch(function(err){
                            console.log(err);
                            Message.error('删除'+ row.accountName +'项目失败');
                            loading.close();
                        });
                    }).catch(() => {

                        Message.info('已取消删除');
                    });
                }else{
                    Message.warning('请先将项目停用');
                }

            },



            //选择项发生变化时触发
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //选择每页显示条数时触发
            handleSizeChange(val) {
                this.pagesize=val;
            },


        },
        mounted() {
            let that=this;
            that.selectProjectData('','-1');
        }
    }
</script>

<style scoped>
    .headerCoster{
        height: 59px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .deleteButtonColor{
        color: red;
    }

    .letBorder{
        border-left: #DCDFE6 solid 1px;
    }

    .cardWidth{
        width: 100%;
    }
</style>